<template>
  <div class="list">
    <img src="https://gw.alicdn.com/imgextra/i4/2201168176213/O1CN01cv49OL1vlbWmWI0VF_!!2201168176213.jpg_140x10000Q75.jpg_.webp" alt="">
    <img :src="arr[count]" alt="">
    <img src="https://img.alicdn.com/imgextra/i4/O1CN01zW4nS81QH98LI9fl5_!!6000000001950-1-tps-473-290.gif" alt="">
  </div>
</template>

<script>

export default {
    data(){
        return{
            arr:[
                "https://gw.alicdn.com/tfscom/i4/1986163697/O1CN018kuO0N1dBH41SS3bM_!!0-item_pic.jpg_140x10000Q75.jpg_.webp",
                "https://gw.alicdn.com/imgextra/i4/O1CN01hBhLm61oni3umtqeB_!!6000000005270-0-yinhe.jpg_140x10000Q75.jpg_.webp",
                "https://gw.alicdn.com/tfscom/i2/2215119376/O1CN01PF9qPP2J8GJxodFVi_!!0-item_pic.jpg_140x10000Q75.jpg_.webp",
                "https://gw.alicdn.com/imgextra/i4/O1CN01AJYxqX1sJiaQ1Wlv9_!!6000000005746-0-yinhe.jpg_140x10000Q75.jpg_.webp",
            ],
            count:0
        }
    },
    mounted(){
        setInterval(()=>{
            this.count++
            if (this.count==4){
                this.count=0
            }
        },2000)
    }
}
</script>

<style scoped>
.list{
    width: 100%;
    height: 250px;
    background: url(https://gjusp.alicdn.com/img/img_1675934774894_14.png@1000y-0+ic_60Q.png_.webp) no-repeat;
    background-size: 100% 250px;
    position: relative;
}
.list img{
    position: absolute;
}
.list img:nth-child(1){
    width: 62px;
    /* height: 83px; */
    top: 54px;
    left: 26px;
}
.list img:nth-child(2) {
    width: 62px;
    /* height: 83px; */
    top: 49px;
    right: 115px;
}
.list img:nth-child(3) {
    width: 164px;
    height: 101px;
    bottom: 10px;
    left: 17px;
}
</style>